<template>
  <el-upload
    v-bind="$attrs"
    :action="action"
    :headers="headers"
    :data="data"
    :multiple="multiple"
    :name="name"
    :drag="drag"
    :with-credentials="withCredentials"
    :show-file-list="showFileList"
    :accept="accept"
    :file-list="fileList"
    :auto-upload="autoUpload"
    :list-type="listType"
    :tip="tip"
    :trigger="trigger"
    :before-upload="beforeUpload"
    :before-remove="beforeRemove"
    :on-preview="onPreview"
    :on-remove="onRemove"
    :on-success="onSuccess"
    :on-error="onError"
    :on-progress="onProgress"
    :on-change="onChange"
    :on-exceed="onExceed"
    :http-request="httpRequest"
    :disabled="disabled"
    :limit="limit"
    :on-start="onStart"
    :class="uploadClass"
  >
    <slot />
    <template #tip v-if="$slots.tip">
      <slot name="tip" />
    </template>
    <template #trigger v-if="$slots.trigger">
      <slot name="trigger" />
    </template>
  </el-upload>
</template>

<script>
export default {
  name: 'MyElUpload',
  inheritAttrs: false,
  props: {
    action: {
      type: String,
      default: '#'
    },
    headers: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    },
    multiple: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'file'
    },
    drag: {
      type: Boolean,
      default: false
    },
    withCredentials: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: true
    },
    accept: {
      type: String,
      default: ''
    },
    fileList: {
      type: Array,
      default: () => []
    },
    autoUpload: {
      type: Boolean,
      default: true
    },
    listType: {
      type: String,
      default: 'text',
      validator: (value) => {
        return ['text', 'picture', 'picture-card'].includes(value)
      }
    },
    tip: {
      type: String,
      default: ''
    },
    trigger: {
      type: String,
      default: 'click',
      validator: (value) => {
        return ['click', 'hover'].includes(value)
      }
    },
    beforeUpload: {
      type: Function,
      default: undefined
    },
    beforeRemove: {
      type: Function,
      default: undefined
    },
    onPreview: {
      type: Function,
      default: undefined
    },
    onRemove: {
      type: Function,
      default: undefined
    },
    onSuccess: {
      type: Function,
      default: undefined
    },
    onError: {
      type: Function,
      default: undefined
    },
    onProgress: {
      type: Function,
      default: undefined
    },
    onChange: {
      type: Function,
      default: undefined
    },
    onExceed: {
      type: Function,
      default: undefined
    },
    onStart: {
      type: Function,
      default: undefined
    },
    httpRequest: {
      type: Function,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: undefined
    },
    uploadClass: {
      type: String,
      default: ''
    }
  },
  emits: [
    'update:fileList', 'change', 'remove', 'preview', 'success', 'error', 
    'progress', 'exceed', 'start'
  ],
  methods: {
    handleChange(file, fileList) {
      this.$emit('update:fileList', fileList)
      this.$emit('change', file, fileList)
      if (this.onChange) {
        this.onChange(file, fileList)
      }
    },
    handleRemove(file, fileList) {
      this.$emit('remove', file, fileList)
      if (this.onRemove) {
        this.onRemove(file, fileList)
      }
    },
    handlePreview(file) {
      this.$emit('preview', file)
      if (this.onPreview) {
        this.onPreview(file)
      }
    },
    handleSuccess(response, file, fileList) {
      this.$emit('success', response, file, fileList)
      if (this.onSuccess) {
        this.onSuccess(response, file, fileList)
      }
    },
    handleError(err, file, fileList) {
      this.$emit('error', err, file, fileList)
      if (this.onError) {
        this.onError(err, file, fileList)
      }
    },
    handleProgress(event, file, fileList) {
      this.$emit('progress', event, file, fileList)
      if (this.onProgress) {
        this.onProgress(event, file, fileList)
      }
    },
    handleExceed(files, fileList) {
      this.$emit('exceed', files, fileList)
      if (this.onExceed) {
        this.onExceed(files, fileList)
      }
    },
    handleStart(file) {
      this.$emit('start', file)
      if (this.onStart) {
        this.onStart(file)
      }
    }
  }
}
</script> 